import React, { useEffect, useState } from 'react';
import * as service from '../../api/zzachieve';
import { message } from "antd"
import './AchieSecondBottom.scss'
interface Props {

}
function AchieSecondBottom(props: Props) {

    interface DataType {
        id: number,
        key: string;

    }

    const [messageApi, contextHolder] = message.useMessage();

    let handspeeddel = async (id: any) => {
        let res = await service.people_speeddel({ id: id })
        console.log(res);
        if (res.status == 200) {
            messageApi.open({
                type: 'success',
                content: '已删除',
            });
        }
    }
    let [qwe, setqwe] = useState([])
    useEffect(() => {
        service.people_speed().then((ok) => {

            console.log(ok.data);
            setqwe(ok.data)
            console.log(qwe);
        })
    }, [])
    return (
        <div className='bottom'>
            {
                qwe.map((item: any, index: any) => {
                    return (
                        <div className='row' key={index} >
                            <div className='left'>
                                <h3>{item.name}</h3>
                                <div>考核范围：{item.range}</div>
                                <div>考核周期：{item.cycle}</div>
                            </div>
                            <div className='middle'>
                                <h3>考核进度:</h3>
                                <div className='num'>
                                    <div className='text'>考核总人数:</div>
                                    <div className='nums'>{item.num}</div>
                                    <div className='text'>评分中:</div>
                                    <div className='nums'>{item.score}</div>
                                    <div className='text'>已完成:</div>
                                    <div className='nums'>{item.component}</div>
                                    <div className='text'>已确认:</div>
                                    <div className='nums'>{item.sure}</div>
                                </div>
                            </div>
                            <div className='right'>
                                <a >查看详情</a>
                                <a >设置</a>
                                <a onClick={() => { handspeeddel(item.id) }}>终止考核</a>
                            </div>
                        </div>
                    )

                })
            }
            {contextHolder}
        </div>
    );
}

export default AchieSecondBottom;